<template>
	<view class="tabbar-page">
		<view class="tabbar ">
			<view :class="PageCur == index?'tabcli':''" v-for="(item,index) in tabbar" :key="index"
				@tap="ontoggle(index)">
				<!-- <image class="tabbar-icon" v-show="PageCur == index" :class="PageCur == index?'animation':''"
					:src="item.url + [PageCur == index?'cli':''] + item.type"></image> -->
				<view class="" style="position: relative;width: 40rpx;height: 40rpx;overflow: hidden;">
					<image class="tabbar-icon noselect" :src="item.url + item.type"></image>
					<!-- <image v-if="PageCur == index" class="tabbar-icon animation select"
						:src="item.url + 'cli' + item.type"></image> -->
				</view>

				<text :style="{transition:'all 1s'}">{{item.name}}</text>
			</view>
			<vertical-drag-gesture-handler onGestureEvent="handleVerticalDrag">
				<view class="select-tab">
					
					<template v-for="(item,index) in tabbar" :key="index">
						<view v-if="PageCur == index" @tap="ontoggle(index)">
							<view class="" style="position: relative;width: 40rpx;height: 40rpx;overflow: hidden;">
								<image v-if="PageCur == index" class="tabbar-icon animation select"
									:src="item.url + 'cli' + item.type"></image>
							</view>

							<text
							:class="[PageCur == index?'select-text':'']"
								:style="{transition:'all 1s'}">{{item.name}}</text>
						</view>
					</template>

				</view>
			</vertical-drag-gesture-handler>
		</view>
		<!-- <skeleton v-if="loading"></skeleton> -->
	</view>
</template>

<script>
	import {
		getCurrentInstance
	} from "vue"
	const GestureState = {
		POSSIBLE: 0,
		BEGIN: 1,
		ACTIVE: 2,
		END: 3,
		CANCELLED: 4
	}
	const {
		Easing,
		spring,
		shared,
		timing,
		runOnUI,
		runOnJS,
		sequence
	} = wx.worklet
	const x = shared(0);
	const y = shared(0);
	const scale = shared(1);
	const pressed = shared(false);
	// 定义可以触发的事件
	const easing = Easing.ease
	var vueinstance = null

	function getMess(msg) {
		console.log('msg',msg);
		// vueinstance.ontoggle(msg)
	}

	function setTip(msg) {
		console.log('d', vueinstance, msg);
		vueinstance.setTip(msg)
	}
	// 引入组件
	export default {
		props: {
			PageCur: {
				type: Number,
				default: 0 // 对象默认值需用函数返回
			}
		},
		mounted() {
			vueinstance = this
			this.initApplyAnimatedCartStyle()
			this.headerAnimate()
		},
		computed: {

		},
		methods: {
			setTip(msg) {
				// console.log('msg');
				this.status = msg
				uni.showToast({
					icon:"none",
					title:msg,
				})
			},
			ontoggle(i) {
				console.log('切换');
				
				this.$emit('ontoggle', i)
			},
			async headerAnimate() {
				// console.log('getCurrentInstance',getCurrentInstance().proxy);
				// const scope = getCurrentInstance().proxy.$scope
				let _this =this
				const query = this.$scope.$vm.createSelectorQuery()
				query.select('.tabcli').boundingClientRect(function(res) {
					console.log('res', res);
					x.value = timing(res.left, {
						duration: 300,
						easing
					})
					y.value = sequence(timing(-20, {
							duration: 100,
							easing
						}),

						timing(0, {
							duration: 200,
							easing
						})
					)
					scale.value = sequence(timing(0.5, {
							duration: 100,
							easing
						}),

						timing(1, {
							duration: 200,
							easing
						})
					)
					this.$forceUpdate();
				}).exec()

			},

			initApplyAnimatedCartStyle() {
				const scope = getCurrentInstance().proxy.$scope
				scope.applyAnimatedStyle('.select-tab', () => {
					'worklet'
					return {
						// backgroundColor: pressed.value ? '#5f9ea0' : '#adff2f',
						transform: `translateX(${x.value}px) translateY(${y.value}px) scale(${scale.value})`,
					};
				}, {
					immediate: true,
					flush: 'async'
				}, (res) => {
					console.log('animatedStyle 已绑定到节点 ', res)

				})

			},
			handleVerticalDrag(evt) {
				'worklet';
				if (!pressed.value) return
				if (evt.state === GestureState.POSSIBLE) {
					// pressed.value = true
					// scale.value = spring(1.2);
				} else if (evt.state === GestureState.END || evt.state === GestureState.CANCELLED) {
					if (y.value < -80) {
						runOnJS(setTip)('打开名片')
					} else if(y.value < -20){
						console.log('y.value',y.value);
						runOnJS(setTip)('已取消')
					}
					if(y.value > 10){
						runOnJS(setTip)('打开弹窗')
					}
					y.value = spring(0)
				} else if (evt.state === GestureState.ACTIVE) {
					if (y.value > -80) {
						runOnJS(setTip)('上滑展示')
					} else if (y.value < -80) {
						runOnJS(setTip)('松手展示')
					}
					y.value += evt.deltaY;
				}
			},

		},

		watch: {
			status:{
				handler(val) {
					let _this = this
					if (val == '打开名片') {
						console.log('打开名片');
						_this.$emit('showCard')
					} 
					
					if (val == '打开弹窗') {
						console.log('打开弹窗');
						_this.$emit('toggleShowModal')
					} 
				},
				immediate: true,
				scope: true
			},
			PageCur: {
				handler(val) {
					let _this = this
					if (val == 1) {
						console.log('进来弹窗');
						uni.showToast({
							icon:"none",
							title:'上滑下滑发现打开隐藏弹窗',
						})
						pressed.value = true
					} else {
						pressed.value = false
					}
					
					this.$nextTick(() => {
						// console.log('_this.scope',_this.scope);
						// if(_this.scope){
						_this.headerAnimate()
						// }
					})
				},
				immediate: true,
				scope: true
			}
		},
		data() {
			return {
				status: '上拉返回首页',
				scope: null,
				tabbar: [{
						//tab数据
						name: '首页',
						url: '/static/images/tabbar/home',
						type: '.png',
					},
					{
						name: '发现',
						url: '/static/images/tabbar/found',
						type: '.png',
					},

					{
						name: '我的',
						url: '/static/images/tabbar/user',
						type: '.png',
					}
				]
			};
		},

	};
</script>

<style lang="scss" scoped>
	.tabbar-page {
		border-top: 1rpx solid #efefef;
		// width: 100vw;
		// // height: 100vh;
		// position: absolute;
		// left: 0rpx;
		// bottom: 0rpx;
		// padding-bottom: env(safe-area-inset-bottom);
		// z-index: 103;
	}

	.tabbar {
		position: relative;
		width: 750rpx;
		min-height: 120rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		// background-color: #ffffff;
		backdrop-filter: blur(10px);
		background-color: rgba(255, 255, 255, 0.1);
		font-size: 22rpx;
		color: $u-content-color;
		// padding-bottom: constant(safe-area-inset-bottom);/* 兼容老版本 iOS */


		view {
			width: 130rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 60rpx;
				height: 60rpx;
				margin-bottom: 16rpx;
			}
		}

		.tabcli {
			color: $u-main-color;
			position: relative;
			z-index: -1;
			transform: translateY(-6px);
			transition: all 1s;
		}
		.select-text{
			color: $u-main-color;
		}
		.select-tab {
			box-sizing: border-box;
			left: 0;
			top: -6px;
			position: absolute;
			width: 130rpx;
			height: 130rpx;
			border-radius: 50%;
			z-index: 1;
			backdrop-filter: blur(10px);
			background-color: rgba(213, 255, 255, 0.1);
			box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
			display: flex;
			justify-content: center;
			align-items: center;

		}

		.tabbar-icon {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
		}

		.animation {
			animation: ada .7s;
		}

		@keyframes ada {
			0% {
				opacity: 0;
				transform: translateY(.9375rem);
			}

			100% {
				opacity: 1;
				transform: translateY(0);
			}
		}
	}
</style>